<template>
  <el-dialog height="500px" v-model="visible" v-bind="{ ...props.dialogAttrs }">
    <div class="table-box" :style="{ height: props.dialogAttrs.height }">
      <ProTable
        ref="proTableBox"
        :columns="props.columns"
        :tool-button="toolButton"
        :pagination="props.pagination"
        :init-param="props.initParam"
        :table-attrs="props.tableAttrs"
        :request-auto="props.requestAuto"
        :data-callback="props.dataCallback"
      >
        <template #tableHeader>
          <GlobalButton :button-list="props.headButtonList"></GlobalButton>
        </template>

        <template #operation="{ row }">
          <GlobalButton :button-list="props.rowButtonList" :row-params="row"></GlobalButton>
        </template>
      </ProTable>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { ButtonProps } from '../GlobalButton/interface';
import { ProTableProps } from '../ProTable/index.vue';
interface DialogTableProps extends ProTableProps {
  headButtonList?: ButtonProps[];
  rowButtonList?: ButtonProps[];
  dialogAttrs?: any;
}
const props = withDefaults(defineProps<DialogTableProps>(), {
  columns: () => [],
  requestAuto: true,
  pagination: true,
  initParam: {},
  toolButton: () => [],
  headButtonList: () => [],
  rowButtonList: () => []
});

let visible = ref(false);

function open() {
  visible.value = true;
}

defineExpose({
  open
});
</script>
